import { PageContainer } from '@ant-design/pro-components';
import {
  Avatar,
  Button,
  Card,
  Col,
  Divider,
  Input,
  Modal,
  Row,
  Select,
  Table,
  Typography,
} from 'antd';
import React, { useState } from 'react';

const qianmingImg = require('../../../assets/image/CT.jpg');

const Admin: React.FC = () => {
  const [canExpand, setcanExpand] = useState(false);
  const columns = [
    {
      title: '姓名',
      width: 100,
      dataIndex: 'prisoner',
      key: 'prisoner',
    },
    {
      title: '年龄',
      width: 100,
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '监室',
      width: 100,
      dataIndex: 'room',
      key: 'room',
    },

    // {
    //   title: '相片',
    //   width: 100,
    //   dataIndex: 'pic',
    //   key: 'pic',
    //   render: () => (
    //     <Avatar
    //       shape="square"
    //       size={90}
    //       icon={
    //         <svg
    //           t="1712402122116"
    //           className="icon"
    //           viewBox="0 0 1024 1024"
    //           version="1.1"
    //           xmlns="http://www.w3.org/2000/svg"
    //           p-id="6209"
    //           width="200"
    //           height="200"
    //         >
    //           <path
    //             d="M512 64a256 256 0 1 1 0 512 256 256 0 0 1 0-512z m0 76.8a179.2 179.2 0 1 0 0 358.4 179.2 179.2 0 0 0 0-358.4zM640 601.6a294.4 294.4 0 0 1 294.08 280.96l0.32 13.44v51.2a12.8 12.8 0 0 1-12.8 12.8h-51.2a12.8 12.8 0 0 1-12.8-12.8V896a217.6 217.6 0 0 0-205.632-217.28L640 678.4H384a217.6 217.6 0 0 0-217.28 205.632L166.4 896v51.2a12.8 12.8 0 0 1-12.8 12.8h-51.2a12.8 12.8 0 0 1-12.8-12.8V896a294.4 294.4 0 0 1 280.96-294.08L384 601.6h256z"
    //             fill="#ffffff"
    //             p-id="6210"
    //           ></path>
    //           <path
    //             d="M858.112 729.6v76.8H170.88v-76.8zM877.44 857.6v76.8H153.728v-76.8z"
    //             fill="#ffffff"
    //             p-id="6211"
    //           ></path>
    //         </svg>
    //       }
    //     />
    //   ),
    // },

    // {
    //   title: '患者自述',
    //   dataIndex: 'prisoner_descrition',
    //   key: 'prisoner_descrition',
    //   render: (_) => _ || '暂无',
    //   width: 100,
    // },
    {
      title: '最后更新',
      dataIndex: 'time',
      key: 'time',
      width: 180,
    },
    {
      title: '操作',
      key: 'action',
      width: 270,
      render: (_) => (
        <Row gutter={[10, 10]}>
          <Col>
            <Button>详情</Button>
          </Col>
          <Col>
            <Button>服药历史</Button>
          </Col>
          <Col>
            <Button>治疗历史</Button>
          </Col>
          <Col>
            <Button onClick={() => setcanExpand(true)}>生成电子档案</Button>
          </Col>
          <Col>
            <Button>打印</Button>
          </Col>
        </Row>
      ),
    },
  ];

  const dataSource = [
    {
      prisoner: '嫌疑人B',
      age: 44,
      room: 'A区201',
      guominshi: '无',
      time: '2024-05-10 15:20',
      medicalHistory: `现病史：
      患者一周前开始出现咳嗽，初为干咳，后逐渐转为有痰的咳嗽。同时，出现流涕，初为清涕，后逐渐转为浓稠黄色鼻涕。喉咙疼痛明显，吞咽困难。伴有轻度发热，体温波动在37.5-38℃之间。全身乏力，食欲减退。无明显的胸闷、气短或胸痛症状。
      
      既往史：
      患者过去身体健康，无重大疾病史。曾有过敏性鼻炎病史，但近期未发作。否认高血压、糖尿病、心脏病等慢性病史。无手术及输血史。
      
      个人史：
      患者生活作息规律，无吸烟、饮酒等不良嗜好。工作环境良好，无特殊职业暴露史。近期无外地旅行史，无与传染病患者接触史。
      
      家族史：
      患者家族中无遗传性疾病史。父母身体健康，无重大疾病史。兄弟姐妹健康状况良好。`,
      condition: `患者自就诊以来，症状有所缓解，但尚未完全康复。目前体温已恢复正常，咳嗽和流涕症状减轻，但仍存在轻度喉咙疼痛。患者精神状态良好，食欲逐渐恢复。已按照医嘱按时服药，并注意休息和饮食调理。

      在体格检查方面，患者咽部充血情况有所改善，扁桃体仍稍肿大，但已无明显化脓现象。双肺呼吸音清晰，未闻及异常呼吸音。心率和血压均在正常范围内。
      
      辅助检查方面，最新的血常规结果显示白细胞计数已接近正常范围，中性粒细胞比例也有所下降，说明感染情况正在得到控制。胸部X线检查仍未见明显异常。
      
      综合患者目前的情况，病情正在逐步好转，但仍需继续巩固治疗。建议患者继续按医嘱服药，注意休息和饮食调理，避免过度劳累和受凉。同时，注意观察病情变化，如有任何不适或症状加重，应及时就医复诊。
      
      此外，对于患者目前的喉咙疼痛，可以考虑使用局部喷雾剂或含片来缓解不适感，但需在医生建议下使用。同时，保持室内空气湿润也有助于缓解喉咙疼痛。
      
      总体来说，患者目前情况稳定，但仍需继续治疗和观察。通过合理的治疗和调理，相信患者能够很快康复。`,
      medicineStatus: '已服药',
    },
  ];

  return (
    <PageContainer>
      <Modal footer={null} open={canExpand} title="电子档案" onCancel={() => setcanExpand(false)}>
        <div className="flex-bt">
          <div>
            <div>姓名：嫌疑人B</div>
            <div>年龄：44 </div>
            <div>身高：181 </div>
          </div>
          <Avatar
            shape="square"
            size={90}
            icon={
              <svg
                t="1712402122116"
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6209"
                width="200"
                height="200"
              >
                <path
                  d="M512 64a256 256 0 1 1 0 512 256 256 0 0 1 0-512z m0 76.8a179.2 179.2 0 1 0 0 358.4 179.2 179.2 0 0 0 0-358.4zM640 601.6a294.4 294.4 0 0 1 294.08 280.96l0.32 13.44v51.2a12.8 12.8 0 0 1-12.8 12.8h-51.2a12.8 12.8 0 0 1-12.8-12.8V896a217.6 217.6 0 0 0-205.632-217.28L640 678.4H384a217.6 217.6 0 0 0-217.28 205.632L166.4 896v51.2a12.8 12.8 0 0 1-12.8 12.8h-51.2a12.8 12.8 0 0 1-12.8-12.8V896a294.4 294.4 0 0 1 280.96-294.08L384 601.6h256z"
                  fill="#ffffff"
                  p-id="6210"
                ></path>
                <path
                  d="M858.112 729.6v76.8H170.88v-76.8zM877.44 857.6v76.8H153.728v-76.8z"
                  fill="#ffffff"
                  p-id="6211"
                ></path>
              </svg>
            }
          />
        </div>
        <Divider></Divider>
        <div className="flex-bt">
          <Select placeholder="请选择后可进行筛选" style={{ width: 200 }}>
            <Select.Option value="在线报病">在线报病</Select.Option>
            <Select.Option value="在线问诊">在线问诊</Select.Option>
            <Select.Option value="服药确认">服药确认</Select.Option>
          </Select>
          <Button type="primary">打印</Button>
        </div>

        <div className="mt20">
          <div>
            <Row>
              <Col span={8}>
                <h3>在线报病</h3>
              </Col>
              <Col span={8}>
                <h3 className="flex-center">系统</h3>
              </Col>
              <Col span={8}>
                <h3 style={{ textAlign: 'right' }}>2024-04-12 15:00</h3>
              </Col>
            </Row>
            <div>患者自述症状，鼻塞，咳嗽</div>
          </div>
          <Divider></Divider>
          <div>
            <Row>
              <Col span={8}>
                <h3>在线问诊</h3>
              </Col>
              <Col span={8}>
                <h3 className="flex-center">医生A</h3>
              </Col>
              <Col span={8}>
                <h3 style={{ textAlign: 'right' }}>2024-04-12 16:30</h3>
              </Col>
            </Row>
            <div>患者自述症状，鼻塞，咳嗽</div>
            <div>治疗及处置：感冒灵 每日三次 每次1粒 三天</div>
          </div>
          <Divider></Divider>
          <div>
            <Row>
              <Col span={8}>
                <h3>服药确认</h3>
              </Col>
              <Col span={8}>
                <h3 className="flex-center">护士B</h3>
              </Col>
              <Col span={8}>
                <h3 style={{ textAlign: 'right' }}>2024-04-13 08:00</h3>
              </Col>
            </Row>
            <div>服用感冒灵1粒</div>
            <div className="flex-aic mt10">
              签名图片：
              <img src={qianmingImg} alt="" style={{ width: '150px' }} />
            </div>
            <div>
              相关附件：<a href="">202404130800xyfa.mp4</a>
            </div>
          </div>
          <Divider></Divider>
          <div>
            <Row>
              <Col span={8}>
                <h3>服药确认</h3>
              </Col>
              <Col span={8}>
                <h3 className="flex-center">护士B</h3>
              </Col>
              <Col span={8}>
                <h3 style={{ textAlign: 'right' }}>2024-04-13 16:00</h3>
              </Col>
            </Row>
            <div>服用感冒灵1粒</div>
            <div className="flex-aic">
              签名图片：
              <img src={qianmingImg} alt="" style={{ width: '150px' }} />
            </div>
            <div>
              相关附件：<a href="">202404130800xyfa.mp4</a>
            </div>
          </div>
          <Divider></Divider>
          <div>
            <Row>
              <Col span={8}>
                <h3>服药确认</h3>
              </Col>
              <Col span={8}>
                <h3 className="flex-center">护士B</h3>
              </Col>
              <Col span={8}>
                <h3 style={{ textAlign: 'right' }}>2024-04-13 20:00</h3>
              </Col>
            </Row>
            <div>服用感冒灵1粒</div>
            <div className="flex-aic">
              签名图片：
              <img src={qianmingImg} alt="" style={{ width: '150px' }} />
            </div>
            <div>
              相关附件：<a href="">202404130800xyfa.mp4</a>
            </div>
          </div>
          <Divider></Divider>
        </div>
      </Modal>

      <Card>
        <Input.Search
          placeholder="输入病人名搜索"
          width={300}
          style={{ width: 300 }}
        ></Input.Search>
        <Typography.Title className="mt10" level={2} style={{ textAlign: 'center' }}>
          <Table columns={columns} dataSource={dataSource}></Table>
        </Typography.Title>
      </Card>
    </PageContainer>
  );
};

export default Admin;
